<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景动画</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");
body {
  padding: 0;
  margin: 0;
}

.more-pens {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
  font-family: "Montserrat";
  font-size: 12px;
}

a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
  font-family: "Montserrat";
  font-size: 12px;
  text-decoration: none;
  background: #212121;
  padding: 4px 8px;
  color: #f7f7f7;
}
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
  background: #edf3f8;
  color: #212121;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}

.center-block {
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  width: 100%;
}

.title {
  font-family: "Montserrat";
  font-weight: 100;
  font-size: 30px;
  text-align: center;
  color: #212121;
  margin-top: 14px;
}

.logo {
  display: block;
  width: 26%;
  min-width: 280px;
  margin: 0 auto;
}

.button {
  -webkit-transition: all 0.3s cubic-bezier(0.69, 0, 0.185, 1);
  transition: all 0.3s cubic-bezier(0.69, 0, 0.185, 1);
  border-radius: 30px;
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  text-align: center;
  text-rendering: optimizeLegibility;
  padding: 16px 40px;
  line-height: 1;
  color: #fff;
  margin: 20px auto 0;
  display: inline-block;
  background: #005eff;
  border: 1px solid #005eff;
  text-decoration: none;
}

.codepen-promotion:active, .codepen-promotion:hover, .codepen-promotion:link, .codepen-promotion:visited {
  position: absolute;
  display: block;
  width: 200px;
  z-index: 111;
  right: 40px;
  bottom: 40px;
}

.codepen-promotion__image {
  width: 100%;
}
</style>
</head>
<body>

<div class="center-block">
    <div class="logo">

      <?xml version="1.0" encoding="utf-8"?>
      <!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 220 65.8" style="enable-background:new 0 0 220 65.8;" xml:space="preserve">
      <style type="text/css">
        .st0{fill:#1B1C1C;}
        .st1{fill:#0073FE;}
      </style>
      <path class="st0" d="M0,65.8V20.4h9.9V22l-0.1,2.1h0.1c0.2-0.3,0.3-0.5,1.5-1.5c1.5-1.5,4.1-3,8.4-3c4.4,0,8,1.6,10.7,4.8
        c2.7,3.1,4.1,7.2,4.1,12.4s-1.5,9.3-4.3,12.4c-2.9,3.1-6.5,4.7-10.9,4.7c-3.1,0-6.2-1.3-7.4-2.3L11,50.7h-0.1
        c0.1,0.8,0.1,1.7,0.1,2.8v12.3H0z M17.1,44.8c3.6,0,6.4-3,6.4-7.8c0-4.8-2.6-8.1-6.4-8.1c-3.6,0-6.4,2.7-6.4,8.1
        C10.7,41.2,13,44.8,17.1,44.8z"/>
      <path class="st0" d="M37.3,53.1V20.4h10.6v5.5l-0.1,2h0.1c1.5-4.6,5.7-8.1,10.4-8.1l1.3,0.1v10.8c-0.6-0.1-1.3-0.2-2.2-0.2
        c-4.4,0-7.2,1.9-8.5,5.7c-0.4,1.2-0.6,2.7-0.6,4.4v12.4H37.3z"/>
      <path class="st0" d="M66.3,30.8h-4.2V19.7h4.5v-8.8h10.7v8.8h6.9v11.1h-6.9v8.8c0,2.8,2,4.2,5.8,4.2l1.5-0.1v9.5
        c-0.8,0.1-1.8,0.2-3,0.2c-2.7,0-6.3-0.3-9.7-2.1c-3-1.8-5.7-4.8-5.7-10.3V30.8z"/>
      <path class="st0" d="M91.1,53.1V30.8h-4V19.7h4v-1.3c0-4.1,1.7-6.6,3.7-8.3c1.1-0.8,2.3-1.5,3.8-2c3-1,5.1-1.2,7.6-1.2l3.3,0.2v9.3
        c-0.5-0.1-1.1-0.1-1.8-0.1c-3.7,0-5.5,0.4-5.5,2.5v1h6v11.1h-6v22.3H91.1z"/>
      <path class="st0" d="M142.8,24.4c3.6,3.2,5.4,7.3,5.4,12.4c0,5-1.8,9.2-5.3,12.3c-3.6,3.1-7.9,4.7-13.2,4.7c-5.3,0-9.7-1.6-13.2-4.7
        c-3.6-3.2-5.3-7.3-5.3-12.3s1.8-9.2,5.3-12.4c3.6-3.2,7.9-4.8,13.2-4.8C134.9,19.6,139.3,21.2,142.8,24.4z M129.7,44.7
        c4.1,0,7.4-3.1,7.4-7.9c0-4.8-3.3-8.1-7.4-8.1c-4.1,0-7.4,3.2-7.4,8.1C122.2,41.6,125.5,44.7,129.7,44.7z"/>
      <path class="st0" d="M151,7.6h11v31.9c0,3.2,0.6,4.2,3.1,4.2l1.3-0.1v9.5c-1,0.1-2.1,0.2-3.3,0.2c-3.4,0-5.7-0.4-8.2-2
        c-2.5-1.6-3.9-5.1-3.9-10.4V7.6z"/>
      <path class="st0" d="M169.4,53.1V20.4h11v32.7H169.4z"/>
      <path class="st0" d="M214.6,24.4c3.6,3.2,5.4,7.3,5.4,12.4c0,5-1.8,9.2-5.3,12.3c-3.6,3.1-7.9,4.7-13.2,4.7c-5.3,0-9.7-1.6-13.2-4.7
        c-3.6-3.2-5.3-7.3-5.3-12.3s1.8-9.2,5.3-12.4c3.6-3.2,7.9-4.8,13.2-4.8C206.7,19.6,211.1,21.2,214.6,24.4z M201.5,44.7
        c4.1,0,7.4-3.1,7.4-7.9c0-4.8-3.3-8.1-7.4-8.1c-4.1,0-7.4,3.2-7.4,8.1C194,41.6,197.4,44.7,201.5,44.7z"/>
      <path class="st1" d="M174.9,16.2c-0.9,0-1.7-0.3-2.4-1l-4.8-4.8c-1.3-1.3-1.3-3.4,0-4.8l4.8-4.8c0.6-0.6,1.5-1,2.4-1s1.7,0.3,2.4,1
        l4.8,4.8c1.3,1.3,1.3,3.4,0,4.8l-4.8,4.8C176.6,15.9,175.8,16.2,174.9,16.2z"/>
      </svg>
    </div>
    <div class="title">1 App, your projects. Unlimited portfolios</div>
   
  </div>

<script>
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var max_particles = 1000;
var hero = 0;
var tela = document.createElement('canvas');
tela.width = $(window).width();
tela.height = $(window).height();
$("body").append(tela);

var canvas = tela.getContext('2d');

var Particle = function () {
  function Particle(canvas, progress) {
    _classCallCheck(this, Particle);

    var random = Math.random();
    this.progress = 0;
    this.canvas = canvas;

    this.x = $(window).width() / 2 + (Math.random() * 200 - Math.random() * 200);
    this.y = $(window).height() / 2 + (Math.random() * 200 - Math.random() * 200);
    this.s = Math.random() * 1;
    this.a = 0;
    this.w = $(window).width();
    this.h = $(window).height();
    this.radius = random > .2 ? Math.random() * 1 : Math.random() * .5;
    this.color = random > .2 ? "#EEEEEE" : "#FFFFFF";
    this.color = random > .8 ? "#EEEEEE" : this.color;
    this.radius = this.color == "#FFFFFF" ? 2 + Math.random() * 2 : this.radius;

    if (hero < 5) {
      this.color = "#005eff";
      this.radius = 2;
      hero++;
    }

    // this.color  = random > .1 ? "#ffae00" : "#f0ff00" // Alien
    this.variantx1 = Math.random() * 300;
    this.variantx2 = Math.random() * 400;
    this.varianty1 = Math.random() * 100;
    this.varianty2 = Math.random() * 120;
  }

  _createClass(Particle, [{
    key: 'render',
    value: function render() {
      this.canvas.beginPath();
      this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
      this.canvas.lineWidth = 2;
      this.canvas.fillStyle = this.color;
      this.canvas.fill();
      this.canvas.closePath();
    }
  }, {
    key: 'move',
    value: function move() {
      this.x += Math.cos(this.a) * this.s;
      this.y += Math.sin(this.a) * this.s;
      this.a += Math.random() * 0.7 - 0.35;

      if (this.x < 0 || this.x > this.w - this.radius) {
        return false;
      }

      if (this.y < 0 || this.y > this.h - this.radius) {
        return false;
      }
      this.render();
      this.progress++;
      return true;
    }
  }]);

  return Particle;
}();

var particles = [];
var init_num = popolate(max_particles);
function popolate(num) {
  for (var i = 0; i < num; i++) {
    setTimeout(function () {
      particles.push(new Particle(canvas, i));
    }.bind(this), i * 2);
  }
  return particles.length;
}

function clear() {
  canvas.globalAlpha = 0.03;
  canvas.fillStyle = '#FFFFFF';
  canvas.fillRect(0, 0, tela.width, tela.height);
  canvas.globalAlpha = 1;
}

function update() {
  particles = particles.filter(function (p) {
    return p.move();
  });
  if (particles.length < init_num) {
    popolate(1);
  }
  clear();
  requestAnimationFrame(update.bind(this));
}
update();
</script>

</body>
</html>
